import { defineComponent, ref, onMounted, computed } from 'vue';
import BreadCrumb from '~/src/components/BreadCrumb';
import ButtonSelect from '~/src/components/ButtonSelect';
import Item from '~/src/components/ButtonSelect/item';
import ButtonTag from '~/src/components/ButtonTag';
import Input from '~/src/components/Input';
import Pagination from '~/src/components/Pagination';
import SelectTag from '~/src/components/SelectTag';
import Table from '~/src/components/table';
import { UserInfo } from '~/src/components/UserInfo';
import Style1080 from './1080.module.scss';
import Stylevedio from './vediotop.module.scss';
import { KEEP_VIDEO_TOP } from '~/src/config';
export default defineComponent({
    setup() {
        const Style = KEEP_VIDEO_TOP ? Stylevedio : Style1080;
         // 表格表头
        const tableColumns = ref([
            {
                title: '就诊日期',
                dataIndex: 'JZRQ',
                align: "left" as "left",
                cellStyle: { fontSize: '30px' },
                headerStyle: { fontSize: '30px', fontWeight: 'bold' as "bold" }, // 使用 'bold' 等符合 FontWeightProperty 的值
            },
            {
                title: '预约渠道',
                dataIndex: 'YYQD',
                align:"left" as "left",
                cellStyle: { fontSize: '30px' },
                headerStyle: { fontSize: '30px', fontWeight: 'bold' as "bold"},
            },
            {
                title: '科室',
                dataIndex: 'KS',
                align: "left" as "left",
                cellStyle: { fontSize: '30px' },
                headerStyle: { fontSize: '30px', fontWeight: 'bold' as "bold"},
            },
            {
                title: '医生',
                dataIndex: 'YS',
                align: "left" as "left",
                cellStyle: { fontSize: '30px' },
                headerStyle: { fontSize: '30px', fontWeight: 'bold' as "bold"},
            },{
                title: '取号状态',
                dataIndex: 'QHZT',
                align: "left" as "left",
                cellStyle: { fontSize: '30px' },
                headerStyle: { fontSize: '30px', fontWeight: 'bold' as "bold"},
            },{
                title: '操作',
                dataIndex: 'CZ',
                align: "left" as "left",
                cellStyle: { fontSize: '30px' },
                headerStyle: { fontSize: '30px', fontWeight: 'bold' as "bold"},
            },
        ]);
        // 表格数据
        const tableData = [
            {JZRQ: '2023-07-05', YYQD: '门诊预约', KS: '门诊部', YS: '王医生', QHZT: '待取号', CZ: '取消预约'}
            , {JZRQ: '2023-07-06', YYQD: '微信小程序', KS: '中医部', YS: '王医生', QHZT: '待取号', CZ: '取号'}
            ,  {JZRQ: '2023-07-07', YYQD: '自助机', KS: '皮肤科门诊', YS: '薛富贵', QHZT: '待取号', CZ: '取消预约'}
            ,  {JZRQ: '2023-07-08', YYQD: '门诊预约', KS: '中医部', YS: '王医生', QHZT: '待取号', CZ: '取号'}
            , {JZRQ: '2023-07-09', YYQD: '门诊预约', KS: '妇产科门诊', YS: '薛富贵', QHZT: '待取号', CZ: '取消预约'}
            , {JZRQ: '2023-07-10', YYQD: '微信小程序', KS: '中医部', YS: '王医生', QHZT: '待取号', CZ: '取消预约'}
            , {JZRQ: '2023-07-11', YYQD: '自助机', KS: '耳鼻喉科门诊', YS: '王医生', QHZT: '待取号', CZ: '取号'}
            , {JZRQ: '2023-07-12', YYQD: '门诊预约', KS: '中医部', YS: '薛富贵', QHZT: '待取号', CZ: '取消预约'}
            , {JZRQ: '2023-07-13', YYQD: '微信小程序', KS: '门诊部', YS: '王医生', QHZT: '待取号', CZ: '取消预约'}
            , {JZRQ: '2023-07-14', YYQD: '自助机', KS: '内科门诊', YS: '王医生', QHZT: '待取号', CZ: '取号'}
            , {JZRQ: '2023-07-15', YYQD: '微信小程序', KS: '中医部', YS: '薛富贵', QHZT: '待取号', CZ: '取消预约'}
            , {JZRQ: '2023-07-16', YYQD: '微信小程序', KS: '门诊部', YS: '王医生', QHZT: '待取号', CZ: '取号'}
            , {JZRQ: '2023-07-17', YYQD: '门诊预约', KS: '中医部', YS: '薛富贵', QHZT: '待取号', CZ: '取消预约'}
            , {JZRQ: '2023-07-18', YYQD: '微信小程序', KS: '外科门诊', YS: '王医生', QHZT: '待取号', CZ: '取消预约'}
            , {JZRQ: '2023-07-19', YYQD: '自助机', KS: '中医部', YS: '薛富贵', QHZT: '待取号', CZ: '取号'}
            , {JZRQ: '2023-07-20', YYQD: '微信小程序', KS: '门诊部', YS: '王医生', QHZT: '待取号', CZ: '取消预约'}
            , {JZRQ: '2023-07-21', YYQD: '门诊预约', KS: '中医部', YS: '薛富贵', QHZT: '待取号', CZ: '取消预约'}
        ]
        // 组件挂载时初始化数据
        onMounted(() => {
        });
        //  分页组件数据更新 分页当前页 展示的数据
        const showDatas = ref();
        // 分页后的数据展示
        const handlePageChange = (Datas:any) => {
            showDatas.value = Datas;
        };
        return () => (<>
            <div class={Style.top}>
                <UserInfo></UserInfo>
                <div class={Style.container_mar} >
                    <div class={Style.body}>
                            <Table
                                // 传递表头
                                columns={tableColumns.value}
                                // 传递分页后的数据
                                data={showDatas.value}
                                // 传递表格样式
                                tableStyle={{}}
                                // 传递容器样式 控制Table外层容器
                                containerStyle={{width: "97%",height: "100%" }}
                            ></Table>
                    </div>
                    <Pagination
                        style={{margin: '0 63px'}}
                        pageSize={8}
                        Data={tableData}
                        onPageChange={handlePageChange}
                    ></Pagination>
                </div>
            </div>
            </>
        );
    }
})

